<template>
    <div
        style="position: absolute;width: 100%;height: 100%;margin: 0;padding: 0;top: 0;left: 0;display: flex;flex-direction: column;">
        <div v-for="item, index in productList" :key="index"
            style="display: flex;align-items: center;margin: 5px 10px;width: calc(100% - 20px);justify-content: space-between;">
            <div style="display: flex;align-items: center;">
                <img style="width:50px;height: 50px;" :src="'http://' + resourceIp + ':8094/' + item.productImg" alt="">
                <div style="user-select: none;margin-left: 10px;">{{ item.productName }}</div>
            </div>
            <div style="display: flex;align-items: center;">
                <el-link @click="goToTrackManagement(item.id)" type="primary">轨迹</el-link>
                <el-link type="success" style="margin-left: 10px;">用例</el-link>
            </div>
        </div>
        <el-button @click="gotoAddProduct" type="primary"
            style="position: absolute;bottom: 20px;left: 0%;right: 0%;width: 100px;margin: auto;">添加产品</el-button>
    </div>
</template>

<script>
import request from "../axios/request"
export default {
    data() {
        return {
            productList: [],
            resourceIp: null
        }
    },
    mounted() {
        this.resourceIp = this.extractIPFromURL(window.location.origin);

        this.getAllProduct()
    },
    methods: {
        goToTrackManagement(id){
            this.$router.push({
                path:"/TrackManagementView/"+id
            })
        },
        extractIPFromURL(url) {
            // 定义正则表达式来匹配IP地址
            const ipRegex = /(?:\d{1,3}\.){3}\d{1,3}/;

            // 使用正则表达式查找匹配项
            const match = url.match(ipRegex);

            // 返回匹配到的IP地址（如果有的话）
            return match ? match[0] : null;
        },
        async getAllProduct() {
            let res = await request({
                url: "/product/api/getAllProducts",
                method: "GET"
            })
            if (res.data.status == 200) {
                this.productList = res.data.data
            }
        },
        gotoAddProduct() {
            this.$router.push({ path: '/addProduct' })
        }
    },
}
</script>

<style></style>